<template>
	<view>
		<navbar :title="$t('warehouse.add')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		</navbar>
		<view class="box1">
			<view class="add">
				<view class="address">
					{{$t("editadd.name")}}
				</view>
				<view class="addressR">
					<u-input v-model="name"  :clearable="false" placeholder-style="text-align:right;font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA" 
					:placeholder="$t('warehouse.fullname')"/>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.ph")}}
				</view>
				<view class="addressR">
					<u-input v-model="phone"  :clearable="false"  placeholder-style="text-align:right;font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA"
					:placeholder="$t('warehouse.phonenumber')"/>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.province")}}
				</view>
				<view class="addressR">
					<u-input v-model="province"  :clearable="false"  placeholder-style="text-align:right;font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA" 
					placeholder=""/>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.city")}}
				</view>
				<view class="addressR">
					<u-input v-model="city"  :clearable="false"  placeholder-style="text-align:right;font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA" 
					placeholder=""/>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.district")}}
				</view>
				<view class="addressR">
					<u-input v-model="district" :clearable="false"  placeholder-style="text-align:right;font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA " placeholder=""/>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.commune")}}
				</view>
				<view class="addressR">
					<u-input v-model="commune"  :clearable="false"  placeholder-style="text-align:right;font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA " placeholder=""/>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.specific")}}
				</view>
				<view class="specificR">
					<u-input v-model="specific"  :clearable="false"  placeholder-style="text-align:right" placeholder=""/>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.code")}}
				</view>
				<view class="addressR">
					<u-input v-model="postcode"  :clearable="false"  placeholder-style="text-align:right" placeholder=""/>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="as">
				<view class="set">
					{{$t("editadd.set")}}
					<view class="default">
						<image style="width: 26rpx;height: 22rpx" src="../../static/image/warn.png"
						></image>
						<view class="">
							{{$t("editadd.default")}}
						</view>
						
					</view>
				</view>
				<u-switch v-model="is_default" :active-color="$utypeprimary" :active-value="1" :inactive-value="0"></u-switch>
			</view>
			<view class="confirm" @click="confirm">
				{{$t("editadd.confirm")}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		address,
		setdefault
	}from '../../api/address.js'
	export default {
		data() {
			return {
				name:'',
				phone:'',
				city:'',
				district:'',
				commune:'',
				specific:''	,
				is_default : 0,
				checked: false,
				postcode:'',
				province : '',
				fontS: {
						fontSize: '26rpx',
						fontFamily: 'Rubik',
						fontWeight: '400',
						color: 'red',
						}
			};
		},
		methods: {
			async confirm(){
				// if( this.checked){
				// 	this.is_default = 1;
				// }
				// else {
				// 		this.is_default = 0;
				// 	}
				if (!this.name || !this.phone || !this.postcode || !this.province || !this.city || !this.district || !this.commune || !this.commune || !this.specific) {
					uni.showToast({
						position: 'center',
						icon:'none',
						title: this.$t('editadd.toast')
					})
					return;
				}
				try {
					let result = await address({
						name : this.name,
						mobile : this.phone,
						postcode : this.postcode,
						province : this.province,
						city: this.city,
						county: this.district,
						village:this.commune,
						address : this.specific,
						is_default : this.is_default?1:0,
					})
					uni.navigateBack({
					});
				} catch (error) {
					uni.showToast({
						position: 'center',
						icon: 'none',
						duration:2000,
						title: error.msg
					});
				}
				
			},
			//  changes(value){
			// 	if(value == false){
			// 		this.is_default = 0,
			// 		console.log(this.is_default)
			// 	}else if (value == true){
			// 		this.is_default = 1,
			// 		console.log(this.is_default)
			// 	}
			// }
		},
	}
</script>

<style lang="scss" scoped>
	page{
		 background-color: #F6F6F6;
	}
	
	.box1{
		height: 882rpx;
		background-color: #FFFFFFFF;
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		line-height: 108rpx;
		padding: 0 40rpx;
		.add{
			height: 108rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #ECECEC;
			.address{
				color: #2B3039;
			}
			.addressR{
				width: 520rpx;
				color: #0F0F0E;
				display: flex;
				align-items: center;
				text-align: right;
			}
			.specificR{
				display: flex;
				align-items: center;
				text-align: right;
				width: 400rpx;
			}
		}
	}
	
	/deep/.u-input{
		align-items: center;
		
	}
	/deep/.uni-input-input{
		text-align: right;
		color: #0F0F0E ;
	}
	
	.box2{
		overflow: hidden;
		background-color: #FFFFFFFF;
		margin-top: 20rpx;
		padding: 40rpx 40rpx;
		.as{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.set{
				font-size: 32rpx;
				line-height: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #2B3039;
				.default{
					display: flex;
					font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #BDBDBD;
					line-height: 26rpx;
					margin-top: 21rpx;
				}
			}
		}
	}
	
	/deep/.u-switch__node {
		background-color: #C8C8C8FF !important; 
	}
	.confirm{
		width: 670rpx;
		height: 90rpx;
		background: $u-type-primary;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #fff;
		line-height: 90rpx;
		text-align: center;
		position: fixed;
		bottom: 60rpx;
	}
</style>

